<template>
	<view class="container">
		<!-- 热评 写死的一句话 -->
		<view class="review">
			亲亲！您可以留下宝贵的建议或者使用中遇到的bug哦！帅气的程序单身狗们会假装看不到的～～～
		</view>

		<!-- 表单 -->
		<view class="ftom-magin">
			<view class="ftom-title">名字<span class="from-span">*</span></view>
			<input class="ftom-input" name="name" type="text" placeholder-style="color:#d4d4d4" placeholder="请一定要输入您的名字哦" v-model="comment_name" />
		</view>
		<view class="ftom-magin">
			<view class="ftom-title">电子邮件<span class="from-span">*</span></view>
			<input class="ftom-input" name="email" type="email" placeholder-style="color:#d4d4d4" placeholder="请一定要输入您的电子邮件" v-model="comment_email" />
		</view>
		<view class="ftom-magin">
			<view class="ftom-title">手机号码</view>
			<input class="ftom-input" name="phone" type="number" maxlength="11" placeholder-style="color:#d4d4d4" placeholder="请输入您的手机号码哦" v-model="comment_phone" />
		</view>
		<view class="ftom-magin">
			<view class="ftom-title">留言内容<span class="from-span">*</span></view>
			<textarea class="ftom-input" placeholder-style="color:#d4d4d4" placeholder="请输入留言内容" auto-height v-model="comment_message"/>
		</view>
		
		<!-- 提交按钮 -->
		<button  class="from-btn" @tap="submit()">提交</button>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				// 留言
				comment_name:'',
				comment_email:'',
				comment_phone:'',
				comment_message:'',
			}
		},
		onLoad() {
		
		},
		methods: {
			submit:function(){
				var that = this;
				const user_id = uni.getStorageSync('user_id')
				if(!that.comment_name){
					uni.showToast({
						icon: "none",
						title: "请输入名字哦"
					})
					return;
				}
				
				var regEmail = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
				if(!that.comment_email){
					uni.showToast({
						icon: "none",
						title: "请输入邮箱"
					})
					return;
				}else if(that.comment_email != '' && !regEmail.test(that.comment_email)){
					uni.showToast({
						icon: "none",
						title: "请输入正确邮箱"
					})
					return;
				}
				
				if(!that.comment_phone){
					that.comment_phone = ''
				}else if( that.comment_phone != '' && that.comment_phone.length <= 10){
					uni.showToast({
						icon: "none",
						title: "请输入正确11位数手机号"
					})
					return;
				}
				if(!that.comment_message){
					uni.showToast({
						icon: "none",
						title: "请输入留言内容"
					})
					return;
				}
				var postData = {
					user_id: user_id,
					name: that.comment_name,
					phone: that.comment_phone,
					email: that.comment_email,
					message: that.comment_message,
				}
				// //传输信息
				app.request('/Message/setMessage', postData, 'POST',
					function(res) {
						if (res.data.code == 1) {
							uni.showToast({
								icon: "none",
								title: "提交留言成功，处理中"
							})
							that.comment_name = "";
							that.comment_phone = "";
							that.comment_email = "";
							that.comment_message = "";
						} else {
							uni.showToast({
								icon: "none",
								title: res.data.msg
							})
						}
						console.log('成功');
						console.log(res);
					},
					function(res) {
						console.log('失败');
						console.log(res);
					},
					function(res) {
						console.log('完成');
						console.log(res);
					}
				);
				
			}
		}
	}
</script>

<style>
	/* 表单 */
	textarea{
		width: auto;
	}
	uni-textarea{
		width: auto;
	}
	.ftom-magin{
		margin: 50rpx 0rpx;
	}
	.ftom-input{
		background-color: #f5f5f5;
		padding: 20rpx 20rpx;
		border-radius: 10rpx;
		font-size: 30rpx;
	}
	.from-span{
		color: red;
		margin-left: 10rpx;
	}
	.ftom-title{
		color: #000000;
		margin-bottom: 20rpx;
		font-size: 28rpx;
	}
	/* 提交按钮 */
	.from-btn{
		background-color: #007AFF;
		color: #FFFFFF;
		border-radius: 100rpx;
		border: #007AFF 1px solid;
		margin: 60rpx 0rpx;
	}
	
	/* 热评 */
	.review {
		background-color: #f9f9f9;
		padding: 32rpx;
		margin: 34rpx 0;
		border-radius: 10rpx;
		color: #ADADAD;
		font-size: 24rpx;
	}

	/* 标题 */
	.title-h {
		font-size: 34rpx;
	}

	/* 页面属性 */
	.container {
		padding: 40rpx;
		padding-bottom: 0;
	}

	.fengrui-img {
		height: 100%;
		width: 100%;
	}
</style>
